<template>
  <div class="add-delete">
    <div class="ad" @click="minus">
      <Icon type="md-remove"/>
    </div>
    <div class="num">{{num}}</div>
    <div class="ad" @click="add">
      <Icon type="md-add"/>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'AddDelete',
    props: {
      num: {
        type: Number,
        default: 0,
      },
    },
    methods: {
      //加
      add() {
        let add = this.num + 1
        this.$emit('add', add)
      },
      //减
      minus() {
        if (this.num <= 1) {
          this.$Message.info('该商品不能减少了呦~')
          return
        }
        let add = this.num - 1
        this.$emit('minus', add)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .add-delete {
    display: flex;
    font-size: 0;
  }

  .add-delete .ad {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    font-size: 12px;
    text-align: center;
    background: #F3F3F3;
    color: #CFCFCF;
    border: 1px solid #CFCFCF;
  }

  .add-delete .num {
    display: table-cell;
    vertical-align: middle;
    width: 40px;
    height: 24px;
    line-height: 24px;
    transform: scale(1);
    transform-origin: 0% 0%;
    border: solid #CFCFCF;
    border-width: 1px 0 1px 0;
    text-align: center;
    font-size: 12px;
  }
</style>
